<!-- contents -->
<em class="ddp-bg-back type-bg"></em>
<div class="ddp-ui-contents-in ddp-pad0 ddp-scroll">
  <!-- top -->
  <div class="ddp-layout-top-menu ddp-clear">
    <!-- label -->
    <div class="ddp-top-label">
      {{ 'msg.comm.menu.explore-data.my.favorite.data' | translate }}
    </div>
    <!-- //label -->
  </div>
  <!-- //top -->

  <div class="ddp-ui-contents-list type-list">
    <div class="ddp-wrap-data-list">
      <!-- top option -->
      <div class="ddp-type-top-option ddp-clear ">
<!--        &lt;!&ndash; 검색 &ndash;&gt;-->
<!--        <div class="ddp-type-search ddp-fleft ">-->
<!--          <component-input-->
<!--            [autoFocus]="false"-->
<!--            [isEnableDelete]="true"-->
<!--            [value]="searchedKeyword"-->
<!--            [placeHolder]="'msg.storage.ph.source.search' | translate"-->
<!--            (changeValue)="onChangedSearchKeyword($event)">-->
<!--          </component-input>-->
<!--          <a href="javascript:" class="ddp-btn-delete"></a>-->
<!--        </div>-->
<!--        &lt;!&ndash; //검색 &ndash;&gt;-->

<!--        <div class="ddp-ui-rightoption">-->
<!--          &lt;!&ndash; form &ndash;&gt;-->
<!--          <div class="ddp-form-label2">-->
<!--            <label class="ddp-label-type">{{'msg.metadata.md.ui.data.type' | translate}}</label>-->
<!--            <div class="ddp-wrap-dropdown">-->
<!--              &lt;!&ndash; select box &ndash;&gt;-->
<!--              <component-select-->
<!--                [defaultIndex]="0"-->
<!--                [array]="sourceTypeList"-->
<!--                [viewKey]="'label'"-->
<!--                (onSelected)="onSelectSourceType($event)">-->
<!--              </component-select>-->
<!--              &lt;!&ndash; //select box &ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--          &lt;!&ndash; //form &ndash;&gt;-->
<!--        </div>-->
      </div>
      <!-- //top option -->
      <div class="ddp-meta-list">
        <div class="ddp-box-list">
          <div class="ddp-data-total" [innerHTML]="getTotalElementsGuide()">
          </div>
          <div class="ddp-no-data" *ngIf="isEmptyMetadataList()">
            No Metadata
          </div>
          <table class="ddp-table-form ddp-table-line" *ngIf="!isEmptyMetadataList()">
            <colgroup>
              <col width="26px">
              <col width="100px">
              <col width="*">
              <col width="200px">
              <col width="160px">
              <col width="13%">
              <col width="180px">
              <col width="180px">
            </colgroup>
            <thead>
            <tr>
              <th>

              </th>
              <th>
                {{ 'msg.metadata.md.ui.data.type' | translate }}
              </th>
              <th (click)="toggleSortOption('name')">
                {{ 'msg.comm.ui.name' | translate }}
<!--                <em class="ddp-icon-array-default2" *ngIf="sortOptions.name.option === 'default'"></em>-->
<!--                <em class="ddp-icon-array-asc2" *ngIf="sortOptions.name.option === 'asc'"></em>-->
<!--                <em class="ddp-icon-array-des2" *ngIf="sortOptions.name.option === 'desc'"></em>-->
              </th>
              <th>
                {{ 'msg.metadata.md.ui.tags' | translate }}
              </th>
              <th >
                {{ 'msg.metadata.md.ui.data.popularity' | translate }}
                <!--              <em class="ddp-icon-array-default2" *ngIf="sortOptions.popularity.option === 'default'"></em>-->
                <!--              <em class="ddp-icon-array-asc2" *ngIf="sortOptions.popularity.option === 'asc'"></em>-->
                <!--              <em class="ddp-icon-array-des2" *ngIf="sortOptions.popularity.option === 'desc'"></em>-->
                <div class="ddp-wrap-hover-info">
                  <em class="ddp-icon-info3"></em>
                  <!-- popup -->
                  <div class="ddp-box-layout4 ddp-popularity">
                    <div class="ddp-data-title">
                      {{'msg.metadata.md.ui.tooltip.title' | translate}}
                    </div>
                    <div class="ddp-data-det">
                      {{'msg.metadata.md.ui.tooltip.description' | translate}}
                      <ul>
                        <li>• {{'msg.metadata.md.ui.tooltip.point.1' | translate}}</li>
                        <li>• {{'msg.metadata.md.ui.tooltip.point.2' | translate}}</li>
                        <li>• {{'msg.metadata.md.ui.tooltip.point.3' | translate}}</li>
                      </ul>
                    </div>
                  </div>
                  <!-- //popup -->
                </div>
              </th>
              <th>
                {{'msg.storage.ui.criterion.creator' | translate}}
              </th>
              <th (click)="toggleSortOption('modifiedTime')">
                {{'msg.comm.ui.list.updated' | translate}}
<!--                <em class="ddp-icon-array-default2" *ngIf="sortOptions.modifiedTime.option === 'default'"></em>-->
<!--                <em class="ddp-icon-array-asc2" *ngIf="sortOptions.modifiedTime.option === 'asc'"></em>-->
<!--                <em class="ddp-icon-array-des2" *ngIf="sortOptions.modifiedTime.option === 'desc'"></em>-->
              </th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let metadata of metadataList" (click)="onClickMetadata(metadata)">
              <td class="ddp-txt-center"><em class="ddp-icon-fav ddp-selected" (click)="onClickFavoriteIconInList(metadata)"></em></td>
              <td>
                <component-metadata-type-box-tag [metadata]="metadata"></component-metadata-type-box-tag>
              </td>
              <td>
                <div class="ddp-txt-long" title="{{getTooltipValue(metadata)}}">
                  <span [innerHTML]="getMetadataName(metadata.name)"></span>
                  <span class="ddp-txt-colortype" *ngIf="isEnableDescription(metadata)" [innerHTML]="getMetadataDescription(metadata.description)"></span>
                </div>
              </td>
              <td>
                <div class="ddp-wrap-tags" *ngIf="isEnableTag(metadata)">
                  <span class="ddp-tags"># {{metadata.tags[0].name}}</span>
                  <span class="ddp-tag-more" *ngIf="isExistMoreTags(metadata)">+ {{metadata.tags.length - 1}}</span>
                </div>
                <div class="ddp-wrap-tags" *ngIf="!isEnableTag(metadata)">
                  -
                </div>
              </td>
              <td>
                <div class="ddp-ui-popularity">
                  <em class="ddp-icon-popularity"></em>
                  <div class="ddp-bar">
                    <span [style.width]="metadata.popularity + '%'" style="margin-bottom:10px;"></span>
                  </div>
                </div>
              </td>
              <td>
                <span class="ddp-txt-long" title="{{metadata?.modifiedBy?.fullName}}" [innerHTML]="getMetadataCreator(metadata?.modifiedBy?.fullName)"></span>
              </td>
              <td>
                {{ metadata.modifiedTime | mdate: 'YYYY-MM-DD HH:mm' }}
              </td>
              <td>
                <a href="javascript:" class="ddp-btn-solid2" *ngIf="isShowEditData(metadata)" (click)="onClickEditData(metadata.id)" >{{'msg.explore.btn.detail.edit.data'| translate}}</a>
                <a href="javascript:" class="ddp-btn-solid2" *ngIf="isShowCreateWorkbench(metadata)" (click)="onClickCreateWorkbench(metadata)"><em class="ddp-icon-add2"></em>{{'msg.explore.btn.detail.make.bench'| translate}}</a>
                <a href="javascript:" class="ddp-btn-solid2" *ngIf="isShowCreateWorkbook(metadata)" (click)="onClickCreateWorkbook(metadata)"><em class="ddp-icon-add2"></em>{{'msg.explore.btn.detail.make.book'| translate}}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <component-pagination *ngIf="!isEmptyMetadataList()" [info]="pageResult"
                          (changePageData)="changePage($event)"></component-pagination>
  </div>
</div>

<ng-template #component_create_workbench></ng-template>
<ng-template #component_create_workbook></ng-template>
<ng-template #component_confirm></ng-template>
<ng-template #component_metadata_detail></ng-template>
<!-- //contents -->
